import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { Input, NavBar, Button ,Toast} from 'react-vant';
import s from './style.module.less'
import { useStore, observer } from '@/store'

const Name=()=> {
  const navigate = useNavigate()
  const {userStore}=useStore()
  const [name, setName] = useState('')

  useEffect(()=>{
    console.log(name);
  },[name])

  const submit=()=>{
    userStore.LoginInNickName=name
    Toast.info('修改成功')
    navigate('/user')
  }
  return (

    <div className={s.main}>
      <NavBar
        title='用户信息'
        onClickLeft={() => navigate(-1)}
      />
      <div className={s.input}>
        <div className={s.nikename}>昵称</div>
        <Input className={s.updatename}
          value={name}
          onChange={text => setName( text )}
          placeholder='请输入昵称'
        />
      </div>

      <Button type='primary' size='large' onClick={()=>submit()}>
        点击保存
      </Button>
    </div>
  )
}

export default observer(Name)
